import QtQuick
import QtQuick.Controls

Item {
  id: root
  width: 950
  height: 100
  readonly property int buttonWidth: 225
  property int selected: 0

  Row {
    anchors.fill: parent
    spacing: 8
    anchors.leftMargin: 10

    Button {
      width: buttonWidth
      height: parent.height - 10

      contentItem: Item {
        Image {
         source: selected === 0 ? ("qrc:///images/btn-Monitoring-on.png") : ("qrc:///images/btn-Monitoring-normal.png")
        }

      }
      background: Rectangle {
        opacity: 0
      }

      onClicked: {
        selected = 0
      }
    }
    Button {
      width: buttonWidth
      height: parent.height - 10

      contentItem: Item {
        Image {
         source: selected === 1 ? ("qrc:///images/btn-tools-on.png") : ("qrc:///images/btn-tools-normal.png")
        }

      }
      background: Rectangle {
        opacity: 0
      }

      onClicked: {
        selected = 1
      }
    }
    Button {
      width: buttonWidth
      height: parent.height - 10

      contentItem: Item {
        Image {
         source: selected === 2 ? ("qrc:///images/btn-tools-on.png") : ("qrc:///images/btn-tools-normal.png")
        }

      }
      background: Rectangle {
        opacity: 0
      }

      onClicked: {
        selected = 2
      }
    }
    Button {
      width: buttonWidth
      height: parent.height - 10

      contentItem: Item {
        Image {
         source: selected === 3 ? ("qrc:///images/btn-system-on.png") : ("qrc:///images/btn-system-normal.png")
        }

      }
      background: Rectangle {
        opacity: 0
      }

      onClicked: {
        selected = 3
      }
    }
  }
}
